<template>
  <button @click="selectResource" class="resourceSearchBtn">搜索资源</button>
  <div v-if="viewResourcesList.length > 0">
    <div class="list-container">
      <div v-for="resource in viewResourcesList" :key="resource.rId" class="resourceItem"
           @click="selectResourceMxg(resource.rId)">
        <hr/>
        <h2 class="resourceTitle">{{ resource.rName }}</h2>
        <div class="resourceTagContainer">
          <span v-for="tag in resource.tags" :key="tag.tagId" class="resourceTag">{{ tag.tagName }}</span>
        </div>

        <!-- 资源预览图 -->
        <div v-if="resource.rJpeg && resource.rJpeg !== 'null' && resource.rJpeg !== ''"
             class="resourceJpeg">
          <img :src="`${globalConst.staticResourceUrl}img/${resource.rJpeg}`" alt="首页图片加载失败"
          />
        </div>
        <div v-else class="resourceJpeg">
          <h2>该资源没有设置预览图</h2>
        </div>
        <!-- 查看详情链接 -->
        <div class="resourceDetailBtnContainer">
          <button class="resourceDetailBtn">查看详情</button>
        </div>
        <!--管理选项-->
        <div v-if="userJurisdiction >=userJurisdictionLevel.RESOURCES_ADMIN_JURISDICTION.level"
             class="resourceManageContainer">
          <button @click="jumpInNewTab(`/src/page/resourceManagement/index.html?rId=${resource.rId}`)"
                  class="resourceManageBtn">资源信息管理
          </button>
        </div>
        <hr/>
      </div>
      <div class="resourcePageControlContainer">
        <!-- 按钮 + 下拉选择框一行 -->
        <div class="resourcePageControlRow">
          <button @click="changePage(-1)" class="indexButton" :disabled="index === 1">上一页</button>
          <button @click="changePage(1)" class="indexButton" :disabled="index === totalPages">下一页</button>
          <label for="maxSize" class="resourcePageSizeLabel">
            每页显示条数:
            <select id="maxSize" v-model="maxSize" @change="setMaxSize" class="resourcePageSizeSelect">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="20">20</option>
            </select>
          </label>
        </div>

        <!-- 统计信息单独一行 -->
        <p class="resourcePageInfo">
          当前页数: {{ index }}，一共 {{ allSize }} 条记录，一共 {{ totalPages }} 页
        </p>
      </div>
    </div>
  </div>
  <div v-else class="resourceNoDataContainer">
    <h2 class="resourceNoDataHint">当前没有可显示的资源，应该是数据库里面没有数据或者是服务器出现了问题。</h2>
  </div>

</template>

<script lang="ts" setup>
import {Resources} from '@models/Resources.ts'
import {computed, onMounted, ref} from 'vue'
import {globalConst} from '@constants/globalConst.ts'
import {getGlobalResourcesList, getResourcesSize, getUser} from "@stores/localStorage.ts";
import {jumpInNewTab} from "@utils/router.ts";
import {userJurisdictionLevel} from "@constants/userJurisdiction.js";

const viewResourcesList = ref<Resources[]>([])
const index = ref(1)
const allSize = ref(0)
const maxSize = ref(5)
const totalPages = computed(() => Math.ceil(allSize.value / maxSize.value))
const userJurisdiction = getUser().jurisdiction

// 获取资源列表
async function getResourcesList() {
  const s = (index.value - 1) * maxSize.value
  const e = index.value * maxSize.value - 1
  const resources = await getGlobalResourcesList(s, e)
  if (!resources || resources.length === 0) {
    console.error('资源获取失败请稍后再试')
    alert('资源获取失败，请稍后再试')
    return
  }
  viewResourcesList.value = resources
  allSize.value = getResourcesSize()
}

// 改变每页显示条数时，重置到第一页
function setMaxSize() {
  index.value = 1
  getResourcesList()
}

function selectResource() {
  jumpInNewTab(`/src/page/selectResourceMsg/index.html`)
}

function selectResourceMxg(rid: number) {
  jumpInNewTab(`/src/page/resourceMsg/index.html?rId=${rid}`)
}

// 翻页
function changePage(direction: number) {
  const newIndex = index.value + direction
  if (newIndex <= 0) {
    window.alert('不能再往前翻了, 已经是第一页了')
    return
  }
  if (newIndex <= totalPages.value) {
    index.value = newIndex
    getResourcesList()
  } else {
    window.alert('不能往后翻了, 已经是最后一页了')
  }
}


// 初始加载资源
onMounted(async () => {
  await getResourcesList()
})
</script>
<style scoped>
/* 列表容器 */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  border-radius: 16px;
  /* 背景模糊 + 半透明 */
  background: rgba(26, 26, 26, 0.35); /* 可调整容器不透明度 */
  backdrop-filter: blur(5%); /* 可调整模糊程度 */
  box-shadow: 0 8px 30px rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.2);
  animation: fadeIn 0.8s ease-out;
}

/* 搜索资源按钮 */
.resourceSearchBtn {
  align-self: flex-start;
  font-size: 1em;
  padding: 0.6em 1.2em;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.resourceSearchBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.resourceSearchBtn:hover::before {
  left: 100%;
}

.resourceSearchBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* 单个资源项 */
.resourceItem {
  background: rgba(42, 42, 42, 0.35); /* 可调整容器不透明度 */
  backdrop-filter: blur(5%); /* 可调整模糊程度 */
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.resourceItem:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-primary);
  border-color: var(--border-primary);
}

/* 资源标题 */
.resourceTitle {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.8rem;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(255, 42, 109, 0.3);
}

/* 资源标签容器 */
.resourceTagContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resourceTag {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 20px;
  background: var(--secondary-gray);
  color: var(--text-primary);
  font-size: 0.8em;
  font-weight: 500;
}

.resourceTag:hover {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
}

/* 资源预览图 */
.resourceJpeg img {
  width: 80%;
  height: auto;
  border-radius: 12px;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(255, 42, 109, 0.2);
  transition: all 0.3s ease;
}

.resourceJpeg img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-glow);
}

/* 资源详情按钮 */
.resourceDetailBtn {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  border-radius: 12px;
  padding: 0.5em 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.resourceDetailBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.resourceDetailBtn:hover::before {
  left: 100%;
}

.resourceDetailBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* 管理按钮 */
.resourceManageBtn {
  background: var(--secondary-gray);
  border-color: var(--secondary-gray-light);
  border-radius: 12px;
  padding: 0.5em 1em;
  font-weight: 500;
  color: var(--text-primary);
}

.resourceManageBtn:hover {
  background: var(--secondary-gray-light);
  box-shadow: 0 0 12px rgba(77, 195, 255, 0.5);
}

/* 分页控制 */
.resourcePageControlContainer {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resourcePageControlRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.indexButton {
  padding: 0.5em 1.2em;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indexButton:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.resourcePageSizeSelect {
  background: var(--bg-secondary);
  border: 2px solid var(--secondary-gray);
  border-radius: 8px;
  padding: 0.4em 0.6em;
  color: var(--text-primary);
  font-weight: 500;
}

.resourcePageInfo {
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

/* 无资源提示 */
.resourceNoDataContainer {
  padding: 3rem;
  text-align: center;
}

.resourceNoDataHint {
  font-size: 1.2em;
  color: var(--text-secondary);
}
</style>
